<template>
	<uni-popup ref="qicheHire_pop">
		<view class="qicheHire4s">
			<view class="title">
				汽车出租
			</view>
			<view class="qicheHire_content">
				<image class="black_1" :src="'/static/index/che/qiche_'+item.car_info.shop.level+'.png'">
				</image>
				<view class="name">{{item.car_info.shop.name}}</view>

				<view class="black_2">
					<view class="views">
						<view class="text1">出租时长：{{item.car_info.shop.use_hour}}h</view>
						<view class="text1">收益：{{item.car_info.shop.day_income}}U</view>
						<view class="text1">油耗：{{item.car_info.shop.consume_num}}L</view>
					</view>
					
				</view>

				<view class="black_3" @click="toqicheHire()">
					<text class="text1">确认出租</text>
				</view>
			</view>
		</view>
		<view style="height: 20px;"></view>
		<view class="bottom">
			<image class="close" @click="close" src="/static/my/close2.png"></image>
		</view>
		<pay ref="paySuccess"></pay>
	</uni-popup>
</template>

<script>
	import pay from '@/components/pay/pay.vue'
	export default {
		components: {
			pay
		},
		name: "qicheHire",
		data() {
			return {
				current: 0,
				item: {
					"id": 0,
					"name": "",
					"price": "",
					"is_auth_give": false,
					"is_open_garage": false,
					"car_info": {
						"id": 0,
						"garage_id": 0,
						"shop_id": 0,
						"end_time": 0,
						"is_hire": false,
						"shop": {
							"id": 0,
							"name": "",
							"level": "0",
							"day_income": "0.00",
							"use_hour": 0,
							"consume_num": 0
						}
					}
				}
			};
		},
		methods: {
			open(item) {
				this.item = item
				this.$refs.qicheHire_pop.open()
			},
			close() {
				this.$refs.qicheHire_pop.close()
			},
			toqicheHire() {
				var data = {
					order_id: this.item.car_info.id
				}
				this.api.http.requests('carorder/hire', data, res => {

					if (res.code != 200) {
						uni.showToast({
							title: res.msg,
							icon: 'error'
						})
						return
					}
					uni.showToast({
						title: res.msg
					})
					this.close()
					uni.$emit('paySuccsse', {
						type: 1,
						msg: res.msg
					})
				}, "POST")
			},
		}
	}
</script>

<style scoped lang="less">
	.qicheHire4s {
		background: linear-gradient(295deg, #D2823A 0%, #EF9164 100%);
		border-radius: 10px;
		padding: 2px;
		text-align: center;
		width: 650rpx;

		.qicheHire_content {
			background-color: #F9F3E5;
			border-radius: 10px;
		}

		.title {
			text-align: center;
			font-size: 49rpx;
			font-weight: 800;
			color: #FFFFFF;
			padding: 5px;
		}

		.black_1 {
			width: 180px;
			height: 130px;
			margin: 25px 10px 0px 10px;
		}


		.black_2 {
			margin-top: 10px;
			font-size: 26rpx;
			font-weight: bold;
			color: #242424;
			display: flex;
			text-align: start;
			.views{
				margin: auto;
			}
			.text1 {
				margin-top: 10px;
			}
		}

		.black_3 {
			padding: 35px 10px 40px 10px;

			.text1 {
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
				background: #FE903D;
				border-radius: 18rpx;
				padding: 10px 38px;
			}
		}
	}

	.bottom {
		text-align: center;
	}

	.name {
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
		padding: 3px;
		width: 120px;
		margin: auto;
		background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #00000088 49%, rgba(0, 0, 0, 0) 100%);
	}

	.close {
		text-align: center;
		margin: auto;
		width: 30px;
		height: 30px;
	}
</style>